<template>
  <div class="merak-card">
    <el-tabs v-model="tabActive" class="merak-tabs">
      <el-tab-pane
        v-for="item in tabPanes"
        v-waterMarker
        lazy
        :key="item.name"
        :name="item.name"
        :label="item.label"
        :style="{ left: tabActive === item.name ? '0px' : `100%` }"
      >
        <component :is="item.component" :currency="LabelFeesProps[item.name]" :auth="auth" :span="language === 'zh' ? 6 : 8" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts" name="LabelFeesDetail">
import { LabelFeesName, LabelFeesProps } from "./index";

import { getCurrentInstance, shallowRef, ref, reactive, onMounted } from "vue";

import { useRoute } from "vue-router";

import { useGlobalStore } from "@/stores/modules/global";

import { ElTabs, ElTabPane } from "element-plus";

import Pay from "./components/Pay.vue";
import Outlay from "./components/Outlay.vue";

import { ResultEnum } from "@/enums/httpEnum";
import { UserAuthType, getUserAuth } from "@/api/modules/user";

const currentInstance = getCurrentInstance();

const route = useRoute();

const { language } = useGlobalStore();

// 页面权限
const auth = ref<UserAuthType>({});

// 激活标签
const tabActive = ref<LabelFeesName>((route.query.typeName as LabelFeesName) ?? LabelFeesName.total_payment_amount_cny);

// 标签页集合
const tabPanes = reactive([
  {
    name: LabelFeesName.total_payment_amount_cny,
    label: currentInstance?.proxy?.$t("marking_labelFees.total_payment_amount_cny"),
    component: shallowRef(Pay)
  },
  {
    name: LabelFeesName.total_expenditure_cny,
    label: currentInstance?.proxy?.$t("marking_labelFees.total_expenditure_cny"),
    component: shallowRef(Outlay)
  },
  {
    name: LabelFeesName.total_payment_amount_rub,
    label: currentInstance?.proxy?.$t("marking_labelFees.total_payment_amount_rub"),
    component: shallowRef(Pay)
  },
  {
    name: LabelFeesName.total_expenditure_rub,
    label: currentInstance?.proxy?.$t("marking_labelFees.total_expenditure_rub"),
    component: shallowRef(Outlay)
  },
  {
    name: LabelFeesName.total_payment_amount_usd,
    label: currentInstance?.proxy?.$t("marking_labelFees.total_payment_amount_usd"),
    component: shallowRef(Pay)
  },
  {
    name: LabelFeesName.total_expenditure_usd,
    label: currentInstance?.proxy?.$t("marking_labelFees.total_expenditure_usd"),
    component: shallowRef(Outlay)
  }
]);

onMounted(() => {
  getUserAuth("LabelFees").then(({ code, data }) => {
    if (code == ResultEnum.SUCCESS) {
      auth.value = data;
    }
  });
});
</script>

<style scoped lang="scss">
.label-fees-detail {
  height: 100%;
}
</style>
